<template>
    <div class="order-detail-container">
        <div class="camera-title">
            <div class="icon">
                <!-- <IconFont font-class-name="iconfont" class-prefix="icon" name="tuikuan" /> -->
                <IconFont name="order" color="#ffffff" size="10"></IconFont>
            </div>
            <div class="camera-right">
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 1">
                    <div>待支付</div>
                    <div class="camera-right-time">
                        <nut-countdown :startTime="new Date().getTime()" :endTime="new Date(objectDetail?.createTime).getTime() + 5 * 60 * 1000
                            " @on-end="TimerOver(objectDetail)"></nut-countdown>
                    </div>
                </div>

                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 12">已退票</div>



                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 1">已提交</div>
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 5">已出票</div>
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 4">待出票</div>
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 6">已收货</div>

                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 10">已取消</div>
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 11">已流单</div>
                <div class="camera-right-status" v-if="orderInfo?.orderStatus == 13">已关闭</div>
            </div>
        </div>
        <div class="camera-box">
            <div class="camera-box-detail">
                <div class="camera-box-detail-cinemaName" v-if="orderInfo?.cinemaName">{{ orderInfo?.cinemaName }}</div>
                <div class="camera-box-detail-row1">
                    <div class="camera-box-detail-row1-right">
                        <image class="img" :src="orderInfo?.filmPic" mode="aspectFill" />
                    </div>
                    <div class="camera-box-detail-row1-left">
                        <div class="camera-box-detail-row1-left-name">
                            <div class="left-num-movie">
                                {{ orderInfo?.filmName }} x {{ orderInfo?.seatCount }}
                            </div>
                        </div>
                        <!-- <div class="camera-box-detail-row1-left-type">

                            {{ orderInfo?.cinemaName }}
                        </div> -->
                      
                        <div class="camera-box-detail-row1-left-time">
                            <div class="camera-box-detail-row1-left-time1">
                                {{ formatShowTimeYear(orderInfo?.filmShowTime) }}
                            </div>
                            <div class="camera-box-detail-row1-left-time2">
                                {{ formatShowTime(orderInfo?.filmShowTime) }} 开场
                            </div>
                        </div>
                        <div class="camera-box-detail-row1-left-address">
                            {{ orderInfo?.cinemaAddress }}
                        </div>
                        <div class="camera-box-detail-row1-left-position-Name">
                            {{ orderInfo?.showName }}
                        </div>
                        <div class="camera-box-detail-row1-left-position">
                            <div class="camera-box-detail-row1-left-position-seat">
                                <div class="camera-box-detail-row1-left-position-seat-item" v-for="item in seatInfo.filter((item)=>item.changeStatus==1)"
                                    :key="item">
                                    <template v-if="item?.seatName">
                                        {{ item?.seatName }}
                                    </template>
                                </div>
                            </div>
                             <div class="camera-box-detail-row1-left-position-seat" v-if="orderInfo?.whetherChangeSeat==1" style="color: red;">
                                
                                <div class="camera-box-detail-row1-left-position-seat-item" v-for="item in seatInfo.filter((item)=>item.changeStatus==2)"
                                    :key="item">
                                    <template v-if="item?.seatName">
                                        {{ item?.seatName }}
                                    </template>
                                </div>
                                (已换座)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="camera-box-vote">
            <div class="demo-box" v-if="orderInfo?.orderStatus == 5 || orderInfo?.orderStatus == 6
                ">
                <div class="camera-box-vote-item-row1">
                    <div class="camera-box-vote-item-row1-title">任意取票机均可取票</div>
                    <div class="camera-box-vote-item-row1-rightTitle" @click="handleClickNone()">
                        查看原始票根
                        <IconFont name="rect-right" size="12" style="margin-left: 2px;"></IconFont>
                    </div>
                </div>
                <nut-swiper :init-page="page" ref="swiper" v-if="ticketInfo.length">
                    <nut-swiper-item v-for="(item, index) in  ticketInfo " :key="item.id" v-if="ticketInfo.length">


                        <div style="display: flex;justify-content: center;align-items: center;">

                            <image :src="item.TICKET" v-if="item.TICKET" style="width: 120px;height: 120px;"
                                @click="handleClickImage(item.TICKET)"></image>
                        </div>
                        <div class="page">
                            <div class="pagetext"> {{ index + 1 }} / {{ ticketInfo.length }}</div>
                        </div>
                        <div class="nut-swiper-item-text" :class="{ 'text-trough': orderInfo?.orderStatus == 4 }">
                            <div style="margin-left: 5px" v-if="item.ticketCode">取票码: {{ item.ticketCode }}</div>
                            <div style="margin-left: 5px" v-if="item.validateCode">验证码:{{ item.validateCode }}</div>



                        </div>

                    </nut-swiper-item>

                </nut-swiper>
                <div class="nut-swiper-btns">
                    <span class="nut-swiper-btns__left" @click="handlePrev">
                        <Left></Left>
                    </span>
                    <span class="nut-swiper-btns__left" @click="handleNext">
                        <Right></Right>
                    </span>
                </div>
            </div>

            <div class="vote-wait" v-if="orderInfo?.orderStatus == 1 || orderInfo?.orderStatus == 4">
                <div class="vote-wait-icon">
                    <image src="../../assets/images/myImg/wait.png" style="width: 100px" mode="widthFix"></image>
                </div>
                <div class="vote-wait-title">正在出票,预计5-40分钟</div>
                <div class="vote-wait-comment">
                    您可以退出此页面,可以下拉进行刷新,或者在订单页面重新进入当前页面，超时未出票请联系客服查询
                </div>
            </div>
            <div class="vote-error" v-if="orderInfo?.orderStatus == 12">
                <div class="vote-error-icon">
                    <image src="../../assets/images/myImg/err.png" style="width: 100px" mode="widthFix"></image>
                </div>
                <div class="vote-error-title">退票原因</div>
                <div class="vote-error-comment">
                    亲！该影院网络售票系统出现故障,请更换万达CGV大地Ume卢米埃等连锁影城,重新购票
                </div>
            </div>
            <div class="vote-close" v-if="orderInfo?.orderStatus == 10">
                <div class="vote-close-title">已经超时</div>
                <div class="vote-close-content">超时未付款,自动关闭订单</div>
            </div>
            <div class="vote-close" v-if="orderInfo?.orderStatus == 11">
                <div class="vote-close-title">已经流单</div>
                <div class="vote-close-content">无人接单,请重新选择订单</div>
            </div>
            <div class="vote-close" v-if="orderInfo?.orderStatus == 13">
                <div class="vote-close-title">订单被关闭</div>
                <div class="vote-close-content">{{ failedReason }}</div>
            </div>
        </div>

        <div class="camera-order">
            <div class="camera-order-number common" v-if="orderInfo?.orderNumber">
                <div class="camera-order-number-left">订单号</div>
                <div class="camera-order-number-right">
                    <div class="camera-order-number-right-orderNumber">
                        {{ orderInfo?.orderNumber }}
                    </div>
                    <div class="camera-order-number-right-btn" @click="copy(orderInfo.orderNumber)">
                        复制
                    </div>
                </div>
            </div>
            <div class="camera-order-time common" v-if="orderInfo?.submitTime != 0">
                <div class="camera-order-time-left">创建时间</div>
                <div class="camera-order-time-right">
                    {{ formatShowTimeYear(orderInfo?.submitTime) }} {{ formatShowTime(orderInfo?.submitTime) }}
                </div>
            </div>
            <div class="camera-order-time common" v-if="orderInfo?.payTime != 0">
                <div class="camera-order-time-left">下单时间</div>
                <div class="camera-order-time-right">
                    {{ formatShowTimeYear(orderInfo?.payTime) }} {{ formatShowTime(orderInfo?.payTime) }}
                </div>
            </div>

            <div class="camera-order-time common" v-if="orderInfo?.updateTicketTime != 0">
                <div class="camera-order-time-left">出票时间</div>
                <div class="camera-order-time-right">
                    {{ formatShowTimeYear(orderInfo?.updateTicketTime) }} {{ formatShowTime(orderInfo?.updateTicketTime) }}
                </div>
            </div>
             <div class="camera-order-time common">
                <div class="camera-order-time-left">是否可调座</div>
                <div class="camera-order-time-right" v-if="orderInfo?.changeSeatStatus== 1">
                   是
                </div>
                 <div class="camera-order-time-right" v-if="orderInfo?.changeSeatStatus== 0">
                  否
                </div>
            </div>
            <div class="camera-order-num common">
                <div class="camera-order-num-left">数量</div>
                <div class="camera-order-num-right">{{ orderInfo?.seatCount }}</div>
            </div>
            <div class="camera-order-yuanjia common" v-if="orderInfo?.price">
                <div class="camera-order-num-left">原价</div>
                <div class="camera-order-num-right">
                    ￥{{
                        (orderInfo?.price / 100).toFixed(2)
                    }} x {{ orderInfo?.seatCount }} 
                    (￥{{(orderInfo?.priceAll / 100).toFixed(2)}})

                </div>
            </div>
            <div class="camera-order-zhekoujia common" v-if="orderInfo?.inputLimitPrice">
                <div class="camera-order-num-left">限价</div>
                <div class="camera-order-num-right">
                    ￥{{
                        (orderInfo?.inputLimitPrice / 100).toFixed(2)
                    }} x {{ orderInfo?.seatCount }}
                    (￥{{(orderInfo?.limitPriceAll / 100).toFixed(2)}})
                </div>
            </div>
            <div class="camera-order-zhekoujia common" v-if="orderInfo?.realPrice">
                <div class="camera-order-num-left">结算价</div>
                <div class="camera-order-num-right">
                    ￥{{
                        (orderInfo?.realPrice / 100).toFixed(2)
                    }} x {{ orderInfo?.seatCount }}
                    (￥{{(orderInfo?.realPriceAll / 100).toFixed(2)}})
                </div>
            </div>
             <div class="camera-order-url common" v-if="voteT">
                <div class="camera-order-url-left">{{ `http://ticket-url.liangpiao.net.cn/#?c=${voteT}` }}</div>
               <div class="camera-order-url-right-btn" @click="copyUrl(`http://ticket-url.liangpiao.net.cn/#?c=${voteT}`)">
                        复制
                </div>
            </div>
        </div>

        <div style="height: 20px"></div>
    </div>
</template>
<script setup>
// 0 待支付订单  3 已出票订单  4  完成订单 -1 超时顶单 -2 失败订单
import Taro, { usePullDownRefresh } from "@tarojs/taro";
import {
    ref,
    onMounted,
    computed,
    Ref,
    reactive,
    nextTick,
    getCurrentInstance,
    onUnmounted,
} from "vue";
// import QrcodeVue from "qrcode.vue";
import QRCode from 'qrcodejs2-fix';
import * as orderApi from "../../api/order";
// import Footer from "./footer.vue";
import { IconFont } from "@nutui/icons-vue-taro";
import { Left, Right } from "@nutui/icons-vue-taro";
import moment from "moment";
const router = Taro.useRouter();
const timer = ref(0);
const status = ref(2);
const isFinish = ref(1);
const qrPath = ref("");
const orderInfo = ref({})
const seatInfo = ref([])
const ticketInfo = ref([])
var swiperSelected = ref(0);
const voteT=ref("")
const failedReason=ref("")
const timerInter = ref(null);
const formatQrCode = computed(() => {
    return (str) => {
        return moment(str).format("YYYY-MM-DD");
    };
});
//时间处理
const formatShowTimeYear = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('YYYY-MM-DD');
        return formattedTime

    };
});// 【格式化】散场时间
//时间处理
const formatShowTime = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('HH:mm');
        return formattedTime

    };
});// 【格式化】散场时间

//下拉刷新
usePullDownRefresh(() => {
    // Taro.showNavigationBarLoading();
    setTimeout(async () => {
        await getDetail({
            orderNumber: router.params.orderId,
        });
        Taro.stopPullDownRefresh()
    }, 400);
});
//票根点击
const handleClickNone = () => {
    const list = []
    ticketInfo.value.forEach((item) => {
        list.push({
            "image": item.ticket,
            "id": item.id
        })

    })
    Taro.navigateTo({
        url: `/pages/origin-vote/index?list=${encodeURIComponent(JSON.stringify(list))}`,
    });
};
const swiper = ref(null);
const page = ref(0);
//页码
const handlePrev = () => {

    swiperSelected.value = swiper.value.activePagination;
    page.value = swiper.value.activePagination;
    setTimeout(() => {
        swiper.value.prev();
    }, 200)
};
const voteList = ref([]);
//页码
const handleNext = () => {

    swiperSelected.value = swiper.value.activePagination;
    page.value = swiper.value.activePagination;
    setTimeout(() => {
        swiper.value.next();

    }, 200)
};
const paramsId = ref(0);
const obj = reactive({});
const TimerFlag = ref(false);
onMounted(async () => {
    Taro.showLoading({
        title: "加载中",
        mask: true,
    });
    paramsId.value = router.params.orderId;
    await getDetail({
        orderNumber: router.params.orderId,
    });
    Taro.hideLoading()
});
//生成二维码 备用
const getCode = (e, id) => {
    new QRCode(document.getElementById(`qrcode${id}`), {
        text: e,
        width: 120,
        height: 120
    });
};
onUnmounted(() => {
    clearInterval(timerInter.value);
    timerInter.value = null;
});
//倒计时结束
const TimerOver = (e) => {
    e.orderProgress = -1;
};
//获取订单详情
const getDetail = async (data) => {
    const res = await orderApi.orderDetail(data);
    if (res.state == 200) {
        orderInfo.value = res.data.orderInfo
        seatInfo.value = res.data.seatInfo
        ticketInfo.value = res.data.ticketInfo
        failedReason.value = res.data.failedReason
        if(orderInfo.value.orderStatus==5 || orderInfo.value.orderStatus==6){
        getUrlAddress({ orderNumber:res.data.orderInfo.orderNumber})
        }
        if (res.data.ticketInfo.length) {
            res.data.ticketInfo.forEach((element) => {
                let qrCodeData = element.ticketCode + element.validateCode;
                let textData = "";
                if (qrCodeData.indexOf("|") !== -1) {
                    qrCodeData = qrCodeData.replace(/\|/g, "%257C")
                }
                element.TICKET = `https://qrcode.hlcode.cn/beautify/style/create?content=${qrCodeData}`
                Taro.hideLoading()
            });
            ticketInfo.value = res.data.ticketInfo
        }
    }
};
//获取链接地址
const getUrlAddress= async(data)=>{
     const res = await orderApi.getUrlByVote(data);
     if(res.state==200){
        voteT.value=res.data
     }
}
//点击图片二维码 放大显示的
const handleClickImage = (e) => {
    Taro.previewImage({
        current: e,
        urls: [e],
    })
}
//复制订单号
const copy = (order) => {
    Taro.setClipboardData({
        data: order, //要被复制的内容
        success: () => {
            //复制成功的回调函数
            Taro.showToast({
                //提示
                title: "复制成功",
                icon: "none",
            });
        },
    });
};
//复制链接
const copyUrl=(e)=>{
Taro.setClipboardData({
        data: e, //要被复制的内容
        success: () => {
            //复制成功的回调函数
            Taro.showToast({
                //提示
                title: "复制成功",
                icon: "none",
            });
        },
    });
}
</script>
<style lang="scss">
.order-detail-container {
    padding: 20px 25px;
    box-sizing: border-box;

    .camera-title {
        display: flex;
        // justify-content: center;
        align-items: center;
        font-size: 28px;
        background-color: #fff;
        padding: 30px;
        border-bottom: 1px solid #eee;
        color: #15181d;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

        .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #5232B7, #7237BC);
            height: 36px;
            width: 36px;
            border-radius: 50px;

            // margin-right: 15px;
            .iconfont {
                font-size: 24px;
                color: #ffffff;
            }
        }

        .camera-right {
            display: flex;
            flex-direction: column;
            // align-items: center;
            justify-content: flex-start;
            margin-left: 20px;

            .camera-right-time {
                color: #858a99;
                font-size: 26px;
                display: flex;
                justify-content: center;
                align-items: center;

                .nut-countdown__content {
                    color: #5232B7 !important;
                    font-size: 24px;
                    font-weight: normal;
                }
            }

            .camera-right-status {
                color: #15181d;
                font-weight: 700;
                font-size: 30px;
            }
        }

        .camera-title-jt {
            font-size: 40px;
            font-weight: 700;
        }
    }

    .camera-box {
        background-color: #fff;
        // border-radius: 30px;
        padding: 30px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;

        box-sizing: border-box;

        .camera-box-detail {
            font-size: 30px;
            .camera-box-detail-cinemaName{
                 font-size: 24px;
                 background-color: #6f52cf;
                 color: #fff;
                 padding: 10px;
                 border-radius: 10px;
                 text-align: center;
                 margin-bottom: 15px;
              }
            .camera-box-detail-row1 {
                display: flex;
                // justify-content: flex-start;
                align-items: center;

                .camera-box-detail-row1-right {
                    width: 216px;
                    height: 288px;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-right: 15px;


                    .img {
                        width: 100%;
                        height: 100%;
                        background-size: 100%;
                    }

                }

                // align-items: center;
                .camera-box-detail-row1-left {
                    font-size: 24px;
                    margin-left: 20px;
                    flex: 1;

                    .camera-box-detail-row1-left-name {
                        color: #15181d;
                        font-size: 26px;
                        font-weight: 700;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .left-num-movie{
                        }
                        .right-city{
                            font-size: 24px;
                            color: #5232B7;
                            font-weight: 500;
                            flex: 1;
                        }
                    }

                    .camera-box-detail-row1-left-time {
                        color: #858a99;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;

                        .camera-box-detail-row1-left-time1 {}

                        .camera-box-detail-row1-left-time2 {
                            color: #5232B7;
                            font-size: 24px;
                            margin-left: 8px;
                        }
                    }

                    .camera-box-detail-row1-left-position-Name {
                        color: #858a99;
                        margin-top: 10px;

                        display: -webkit-box;
                        /* autoprefixer: ignore next */
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    .camera-box-detail-row1-left-address {
                        color: #858a99;
                        margin-top: 10px;

                        // display: -webkit-box;
                        // /* autoprefixer: ignore next */
                        // -webkit-box-orient: vertical;
                        // -webkit-line-clamp: 1;
                        // text-overflow: ellipsis;
                        // overflow: hidden;
                    }

                    .camera-box-detail-row1-left-position {
                        margin-top: 10px;
                        display: -webkit-box;
                        /* autoprefixer: ignore next */
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;

                        color: #858a99;

                        .camera-box-detail-row1-left-position-seat {
                            display: flex;
                            flex-wrap: wrap;

                            .camera-box-detail-row1-left-position-seat-item:nth-child(n + 2) {
                                margin-left: 5px;
                            }
                        }
                    }

                    .camera-box-detail-row1-left-type {
                        color: #858a99;
                        margin-top: 10px;
                        font-size: 24px;
                    }
                }
            }

            .camera-box-detail-row2 {
                margin-top: 25px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .camera-box-detail-row2-left {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #5232B7;
                    font-weight: 700;
                    font-size: 28px;

                    .sanjiantouFont {
                        font-size: 42px;
                        margin-left: 5px;
                    }
                }
            }
        }
    }

    .camera-box-vote {
        margin-top: 25px;
        border-radius: 20px;
        padding: 25px;
        background-color: #fff;
        .demo-box {
            position: relative;
            .camera-box-vote-item-row1 {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .camera-box-vote-item-row1-title {
                    color: #858a99;
                    font-size: 24px;
                }
                .camera-box-vote-item-row1-rightTitle {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24px;
                    color: #5232B7;
                }
                .rightSanjiantou {
                    font-size: 38px;
                    color: #5232B7;
                }
            }
            .nut-swiper {
                margin-top: 50px;
                .nut-swiper-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    padding-right: 60px;
                    .page {
                        font-size: 16px;
                        color: #15181d;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 20px;
                        .pagetext {
                            width: 100px;
                            padding: 5px;
                            border-radius: 10px;
                            text-align: center;
                            box-sizing: border-box;
                            background-color: #eee;
                        }
                    }
                    .nut-swiper-item-text {
                        font-size: 22px;
                        margin-top: 10px;
                        text-align: center;
                        color: #15181d;
                    }
                }
            }
            .nut-swiper-btns {
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
                display: flex;
                justify-content: space-between;
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 20px;
                    height: 20px;
                    color: #858a99;
                    // background-color: rgba(0, 0, 0, 0.2);
                }
            }
        }
        .vote-succes {
            display: flex;
            flex-direction: column;

            .vote-succes-item:last-child {
                border-bottom: 0;
            }

            .vote-succes-item {
                // background-color: pink;
                padding: 5px 0 25px;
                border-bottom: 1px solid #eee;
                box-sizing: border-box;

                .camera-box-vote-item-row1 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .camera-box-vote-item-row1-title {
                        color: #858a99;
                        font-size: 24px;
                    }

                    .camera-box-vote-item-row1-rightTitle {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24px;
                        color: #5232B7;
                    }

                    .rightSanjiantou {
                        font-size: 38px;
                        color: #5232B7;
                    }
                }

                .camera-box-vote-item-row2 {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .camera-box-vote-item-row2-qrCode {
                        width: 300px;
                        height: 300px;
                        margin-top: 20px;
                    }

                    .camera-box-vote-item-row2-text {
                        font-size: 24px;
                        color: #858a99;
                        margin-top: 15px;
                    }
                }
            }

            .vote-succes-item:nth-child(n + 2) {
                margin-top: 20px;
            }
        }

        .vote-wait {
            display: flex;
            flex-direction: column;

            .vote-wait-icon {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .vote-wait-title {
                color: #dd9654;
                text-align: center;
                font-size: 28px;
                margin-top: 25px;
                font-weight: 700;
            }

            .vote-wait-comment {
                font-size: 24px;
                margin-top: 20px;
                color: #858a99;
                text-align: center;
                padding: 0 50px;
            }
        }

        .vote-error {
            display: flex;
            flex-direction: column;

            .vote-error-icon {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .vote-error-title {
                color: #5232B7;
                text-align: center;
                font-size: 28px;
                margin-top: 25px;
                font-weight: 700;
            }

            .vote-error-comment {
                font-size: 24px;
                margin-top: 20px;
                color: #5232B7;
                text-align: center;
                padding: 0 50px;
            }
        }

        .vote-close {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .vote-close-title {
                font-size: 30px;
                color: #15181d;
            }

            .vote-close-content {
                font-size: 24px;
                color: #858a99;
                margin-top: 10px;
            }
        }
    }

    .camera-order {
        margin-top: 25px;
        padding: 25px;
        border-radius: 20px;
        display: flex;
        font-size: 24px;
        color: #858a99;
        flex-direction: column;
        background-color: #fff;

        .common {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .camera-order-time {
            margin-top: 20px;
        }

        .camera-order-num {
            margin-top: 20px;
        }

        .camera-order-number {
            .camera-order-number-left {}

            .camera-order-number-right {
                display: flex;
                justify-content: center;
                align-items: center;

                .camera-order-number-right-orderNumber {}

                .camera-order-number-right-btn {
                    // background-color: #eee;
                    border: 1px solid #f8f6f7;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    margin-left: 10px;
                    border-radius: 10px;
                }
            }
        }
        .camera-order-url {
            margin-top: 20px;
            .camera-order-url-left{
                color: #5232B7;

            }
            .camera-order-url-right-btn{

            }

        }

        .camera-order-yuanjia {
            margin-top: 20px;
        }

        .camera-order-zhekoujia {
            margin-top: 20px;
        }
    }
}

// .fooster-btn {
//   position: fixed;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   background-color: #fff;
//   padding: 30px 40px;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   .fooster-btn-left {
//     font-size: 26px;
//   }
//   .fooster-btn-right {
//     .nut-button--default {
//       border: none !important;
//     }
//   }
// }
</style>
